<template>
  <!-- 循环 -->
  <view class="circulate"  v-if="status1.length">
    <!-- 选择题循环 -->
    <view class="questionSelect">
      <!-- 输入一、选择题 -->
      <view class="boxType" >
        &nbsp {{dataType[0]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in status1.length" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
          <!-- 如果状态为1，显示蓝色按钮 -->
          <button v-bind:class="[status1[count-1]===0?'buttonUnfinished':'buttonFinished']" class="button-span"
                  type="default"
                  @click="check(count-1)">
            {{count}}
          </button>
        </view>
      </view>
    </view>
    <!-- 判断题循环 -->
    <view class="questionFill"  v-if="status2.length">
      <!-- 输入二、判断题 -->
      <view class="boxType" >
        {{dataType[1]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in status2.length" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
          <!-- 如果状态为1，显示蓝色按钮 -->
          <button class="button-span" v-bind:class="[status2[count-1]===0?'buttonUnfinished':'buttonFinished']"
                  type="default"
                  @click="check(count+status1.length-1)">
            {{count+status1.length}}
          </button>
        </view>
      </view>
    </view>
    <!-- 填空题循环 -->
    <view class="questionFill"  v-if="status3.length">
      <!-- 输入三、填空题 -->
      <view class="boxType" >
        {{dataType[2]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in status3.length" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
          <!-- 如果状态为1，显示蓝色按钮 -->
          <button class="button-span" v-bind:class="[status3[count-1]===0?'buttonUnfinished':'buttonFinished']"
                  type="default"
                  @click="check(count+status1.length+status2.length-1)">
            {{count+status1.length+status2.length}}
          </button>
        </view>
      </view>
    </view>
    <!-- 简答题题循环 -->
    <view class="questionAnswer" v-if="status4.length">
      <!-- 输入四、简答题题 -->
      <view class="boxType" >
        {{dataType[3]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in status4.length" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
          <!-- 如果状态为1，显示蓝色按钮 -->
          <button class="button-span" v-bind:class="[status4[count-1]===0?'buttonUnfinished':'buttonFinished']"
                  type="default"
                  @click="check(count+status1.length+status2.length+status3.length-1)">
            {{count+status1.length+status2.length+status3.length}}
          </button>
        </view>
      </view>
    </view> 
  </view>
</template>

<script>
export default{
  emits:['pageChange'],
  data(){
    return{
      questions:[],
      questionPaper:{           //页面根据status来选择性的渲染选项按钮样式
        sumScore:0
      },
	  status1:[],//答题卡各题型状态
	  status2:[],
	  status3:[],
	  status4:[],
      dataType:[],//数据类型
    }
  },
  created(){
    this.getMsg();
  },
  methods:{
    getMsg(){
      var i;
      this.questions = this.$store.state.questions;
      for( i = 0 ; i < this.questions.length ; i++){
        this.dataType.push(this.questions[i].type);
      }
      this.dataType = Array.from(new Set(this.dataType));//题目类型去重排序
     // if (this.Data[0].count===0&&this.Data[2].count===0&&this.Data[1].count===0&&this.Data[3].count===0){
        for (i = 0; i<this.questions.length; i++){
          for (var j=0;j<this.dataType.length;j++){
            if (this.questions[i].type===this.dataType[j]){
				if (j===0){
					if (this.questions[i].answer==null||this.questions[i].answer.includes('')===true)         //根据questuion中answer中是否有数据更新status的值
					  this.status1.push(0);
					else
					  this.status1.push(1);
				}else if (j===1){
					if (this.questions[i].answer==null||this.questions[i].answer.includes('')===true)         //根据questuion中answer中是否有数据更新status的值
					  this.status2.push(0);
					else
					  this.status2.push(1);
				}else if (j===2){
					if (this.questions[i].answer==null||this.questions[i].answer.includes('')===true)         //根据questuion中answer中是否有数据更新status的值
					  this.status3.push(0);
					else
					  this.status3.push(1);
				}else if (j===3){
					if (this.questions[i].answer==null||this.questions[i].answer.includes('')===true)         //根据questuion中answer中是否有数据更新status的值
					  this.status4.push(0);
					else
					  this.status4.push(1);
				}
            }
          }
        }
  //       console.log("组件内的初始化的status1",this.status1)
		// console.log("组件内的初始化的status2",this.status2)
		// console.log("组件内的初始化的status3",this.status3)
		// console.log("组件内的初始化的status4",this.status4)
      // }
    },
    check(cnt){   //子组件向父组件传值，该值表示进度条下标信息
      this.$emit('pageChange',cnt)
    }
  }
}
</script>

<style>
.boxType{
	margin: 12rpx;
  font-size: 36rpx;
}
.buttonUnfinished{
  border-radius: 30rpx;
  height: 60rpx;
  width: 60rpx;
  margin-left: 15rpx;
  margin-bottom: 15rpx;
  line-height: 60rpx;
  background-color: white;
  color: black;
  padding: 0;
}
.buttonFinished{
  border-radius: 30rpx;
  height: 60rpx;
  width: 60rpx;
  margin-left: 15rpx;
  margin-bottom: 15rpx;
  line-height: 60rpx;
  background-color: #3498DB;
  color: #F8F8F8;
  padding: 0;
}
/* .questionSelect{
  margin-top: 30rpx;
} */
.questionFill{
  margin-top: 30rpx;
}
.questionAnswer{
  margin-top: 30rpx;
}
.questionComprehensive{
  margin-top: 30rpx;
}
.questionJudge{
  margin-top: 30rpx;
}
</style>

